<template>
  <div ref="echarts" style="width: 100%; height: 100%"></div>
</template>
  
<script>
import * as echarts from "echarts";

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.echarts);
      const cellSize = [80, 80];
      const pieRadius = 30;
      function getVirtualData() {
        const date = +echarts.time.parse("2023-09-01");
        const end = +echarts.time.parse("2023-10-01");
        const dayTime = 3600 * 24 * 1000;
        const data = [];
        for (let time = date; time < end; time += dayTime) {
          data.push([
            echarts.time.format(time, "{yyyy}-{MM}-{dd}", false),
            Math.floor(Math.random() * 10000),
          ]);
        }
        return data;
      }
      const scatterData = getVirtualData();
      const pieSeries = scatterData.map(function (item, index) {
        return {
          type: "pie",
          id: "pie-" + index,
          center: item[0],
          radius: pieRadius,
          coordinateSystem: "calendar",
          label: {
            formatter: "{c}",
            position: "inside",
          },
          data: [
            { name: "电气故障", value: Math.round(Math.random() * 24) },
            { name: "机械故障", value: Math.round(Math.random() * 24) },
            { name: "原料原因", value: Math.round(Math.random() * 24) },
          ],
        };
      });
      const option = {
        tooltip: {},
        legend: {
          data: ["电气故障", "机械故障", "原料原因"],
          orient: "vertical",
          right: 40,

        },
        title: {
          text: '月度设备故障原因统计分析',
          left: '20',
          top: 16
        },
        calendar: {
          top: "middle",
          left: "center",
          orient: "vertical",
          cellSize: cellSize,
          yearLabel: {
            show: false,
            fontSize: 30,
          },
          dayLabel: {
            margin: 20,
            firstDay: 1,
            nameMap: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          monthLabel: {
            show: false,
          },
          range: ["2023-09"],
        },
        series: [
          {
            id: "label",
            type: "scatter",
            coordinateSystem: "calendar",
            symbolSize: 0,
            label: {
              show: true,
              formatter: function (params) {
                return echarts.time.format(params.value[0], "{dd}", false);
              },
              offset: [-cellSize[0] / 2 + 10, -cellSize[1] / 2 + 10],
              fontSize: 14,
            },
            data: scatterData,
          },
          ...pieSeries,
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>
  